@charset "UTF-8";
$fs:64px;
html {
    font-size: $fs;
}

//将px单位换算成rem单位
@function r($px) {
    @return $px/$fs*1rem
}

//flex布局
.flex {
    display: flex;
}

//头部
header {
    width: 100%;
    height: r(169px);
    border-bottom: r(1px) solid #c1c1c1;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    .top {
        height: r(88px);
        padding: r(0px) r(25px) r(0px) r(29px);
        background: #f7f7f7;
        border-bottom: r(1px) solid #c1c1c1;
        align-items: center;
        justify-content: space-between;
        span {
            font-size: r(33px);
        }
        a {
            .icon-fanhui {
                font-size: r(37px);
                color: #848689;
            }
        }
        .icon-cx {
            font-size: r(34px);
        }
        .finish{
            display: none;
            font-size: r(29px);
            color: #666666;
        }
    }
    .bottom {
        height: r(81px);
        .menu {
            height: 100%;
            width: 100%;
            border-bottom: r(1px) solid #c1c1c1;
            background: white;
            .grounding,
            .undercarriage {
                width: 50%;
                height: 100%;
                font-size: r(24px);
                justify-content: center;
                align-items: center;
            }
            .select {
                color: #d62d31;
                position: relative;
                &:after {
                    content: "";
                    width: r(154px);
                    height: r(4px);
                    position: absolute;
                    bottom: 0;
                    left: r(82px);
                    background: #d62d31;
                }
            }
        }
    }
}

//end
//商品主要内容
.grounding-content,
.undercarriage-content {
    margin-top: r(169px);
    margin-bottom: r(98px);
    border-bottom: r(1px) solid #c1c1c1;
    background: #f3f4f6;
    display: none;
    z-index: 1;
    .commodity {
        width: 100%;
        height: r(217.5px);
        align-items: center;
        border-bottom: r(1px) solid #c1c1c1;
        position: relative;
        .red-c{
            display: none;
            height: 100%;
            width: r(75px);
            color: #DDDDDD;
            justify-content: center;
            align-items: center;
            .icon-gouxuanzhong{
                font-size: r(50px);
            }
        }
        .commodity-left {
            width: r(245px);
            height: 100%;
            justify-content: center;
            align-items: center;
            img {
                width: r(180px);
                height: r(180px);
            }
        }
        .commodity-right {
            height: r(180px);
            width: r(395px);
            flex-direction: column;
            .commodity-title {
                font-size: r(22px);
                overflow: hidden;
                padding-right: r(20px);
                display: -webkit-box;
                /*设置第几行...*/
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical ;
                text-overflow: ellipsis;
            }
            .num,
            .price {
                font-size: r(23px);
                color: #999999;
            }
            .num {
                padding-top: r(17px);
            }
            .price {
                padding-top: r(25px);
                justify-content: space-between;
                align-items: center;
                p {
                    width: auto;
                    display: inline-block;
                    span:last-of-type {
                        font-size: r(25px);
                        color: #d62d31;
                        font-weight: bold;
                    }
                }
                .icon-more {
                    font-size: r(44px);
                    color: #d62d31;
                    padding-right: r(20px);
                }
            }
        }
        .more{
            display: none;
            position: absolute;
            left: r(28px);
            top: r(16px);
            width: r(600px);
            height: r(110px);
            background: rgba(0,0,0,.7);
            font-size: r(20px);
            color: white;
            border-radius: r(6px);
            justify-content: space-around;
            align-items: center;
            li{
                flex-direction: column;
                text-align: center;
            }
            .iconfont{
                font-size: r(45px);
            }
            .sjx{
                position: absolute;
                right: r(10px);
                bottom: r(-18px);
                border-left: r(20px) solid transparent; 
                border-right: r(20px) solid transparent; 
                border-top: r(18px) solid rgba(0,0,0,.7); 
            }
        }
    }
}

.show {
    display: block;
}
//底部操作菜单
.bottom-menu {
    width: 100%;
    height: r(98px);
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
    .bottom {
        width: r(560px);
        height: r(70px);
        justify-content: space-between;
        .bottom-left,
        .bottom-right {
            width: r(270px);
            height: 100%;
            font-size: r(26px);
            justify-content: center;
            align-items: center;
            border: r(1px) solid #bcc1c4;
        }
        .bottom-left {
            background: #d62d31;
            color: white;
            border-radius: r(2px);
        }
    }
}
//批量管理编辑菜单
.batchMenu{
    display: none;
    width: 100%;
    height: r(98px);
    justify-content: space-around;
    align-items: center;
    background: white;
    position: fixed;
    bottom: 0;
    left: 0;
    a{
        font-size: r(24px);
        width: r(140px);
        height: r(60px);
    }
    a:first-of-type{
        color: #c1c1c1;
        justify-content: center;
        align-items: center;
        .icon-gouxuanzhong{
            font-size: r(35px);
            color: #DDDDDD;
            margin-right: r(15px);
        }
    }
    .aMenu{
        border: r(1px) solid #d2d2d2;
        color: #666666;
        justify-content: center;
        align-items: center;
    }
}
.xz{
    color: #d62d31 !important;
}
.scl{
    display: flex !important;
}
